<template>
  <div class="order-view">
    <el-button type="text" @click="getDetail">{{
        data.saleBackRequestCode
      }}
    </el-button>
    <el-dialog
      title="退货申请 - 详情"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <template>
        <div>
          <el-descriptions title="退货单">
            <el-descriptions-item label="退货申请编号">{{
                data.saleBackRequestCode
              }}
            </el-descriptions-item>
            <el-descriptions-item label="单据日期">{{
                data.createDate
              }}
            </el-descriptions-item>
            <el-descriptions-item label="金额">{{
                data.total
              }}
            </el-descriptions-item>
            <el-descriptions-item label="审批人">{{
                data.userId
              }}
            </el-descriptions-item>
            <el-descriptions-item label="审批状态">{{
                data.status == 0 ? "待审核" : data.status == 1 ? "审核通过" : "驳回"
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
<!--      <SaleBackRequestDetail :codeTo=data.saleBackRequestCode></SaleBackRequestDetail>-->
      <el-table :data="saleBackRequestDetailList" style="width: 100%">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="商品编号" align="center" prop="proCode"/>
        <el-table-column label="商品名称" align="center" prop="proName"/>
        <el-table-column label="数量" align="center" prop="proNum"/>
        <el-table-column label="出售单价" align="center" prop="price"/>
        <el-table-column label="小计" align="center">
          <template slot-scope="scope">
            {{ (scope.row.proNum * scope.row.price).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SaleBackRequestDetail from "./SaleBackRequestDetail.vue";
import {
  listSaleBackRequestDetail,
  getSaleBackRequestDetail,
  delSaleBackRequestDetail,
  addSaleBackRequestDetail,
  updateSaleBackRequestDetail
} from "@/api/xiaoshou/saleBackRequestDetail";
export default {
  name: "SaleBackRequestView",
  props: ["viewData"],
  components: {SaleBackRequestDetail},
  data() {
    return {
      data: this.viewData,
      dialogVisible: false,
      saleBackRequestDetailList:[],
      saleBackRequestCode:"",
      total:0,
      queryParams:{
        pageNum:1,
        pageSize:10
      }
    };
  },
  watch: {
    viewData() {
      this.data = this.viewData;
      this.getList();
    }
  },

  methods: {
    getDetail(){
      this.dialogVisible=true;
      this.getList()
    },
    handleClose(done) {
      done();
    },
    getList() {
      this.queryParams.saleBackRequestCode = this.data.saleBackRequestCode;
      listSaleBackRequestDetail(this.queryParams).then(response => {
        this.saleBackRequestDetailList = response.rows;
        this.total = response.total;
      });
    },
  },
};
</script>
